<template>
  <div class="oitem_new">
    <div>
        <div class="oitem_title ">
            <span class="f1">品牌直营</span>
            <span class="f2">待付款</span>
        </div>
        <ul>
            <li class="clearfix">
                <a href="" class="defaultblock">
                    <div class="zppic">
                        <img src="https://img08.miyabaobei.com/d1/p6/item/0/0/20418061559153_1_fffe9550.jpg" alt="">
                    </div>
                    <div class="zpdes ">
                        <div class="zpt">
                            蓝漂 5包80抽婴儿柔湿巾纸巾幼儿新生大包装成人家用宝宝手口屁可用 5包
                        </div>
                        <div class="size_gg">规格:5包</div>
                        <span class="serverTxt">支持7天放心退 | 支持换货</span>
                    </div>
                    <div class="zpprice ">
                        <div class="sale_price">¥15.1</div>
                        <div class="zpnum">x <span>1</span></div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="total_all">
        <span class="num">
            共<em>1</em>件商品
        </span>
        <span>
            合计<span>￥</span>
            <span class="total_price">999</span>
        </span>
    </div>
    <div class="oitem_new_botm ">
        <button class="change">修改地址</button>
        <button class="cancel">取消</button>
        <button class="pay">支付</button>
    </div>
  </div>
</template>

<script>
export default {
  
   
};
</script>

<style lang="stylus" scoped>
.oitem_new {
    background: #fff;
    margin-bottom: 2.667vw;
    margin-top 2.667vw
}
.oitem_title {
    line-height: 16.8vw;
    color: #666;
    font-size: 4vw;
    border-bottom: 0.267vw solid #ddd;
    overflow: hidden;
}
.oitem_title .f1{
    padding-left: 2.933vw;
    float: left;
}
.oitem_title .f2{
    padding-right: 2.933vw;
    float: right;
    color: #ea4141;
}
.oitem_new ul {
    background: #fcfcfc;
    overflow: hidden;
}
.oitem_new ul li {
    border-bottom: 0.267vw solid #e4e4e4;
}
.clearfix {
    zoom: 1;
    clear: both;
}
.clearfix:after, .clearfix:before {
    content: "";
    display: table;
}
.defaultblock {
    display: block;
    height: 26.133vw;
}
.oitem_new .zppic {
    display: inline-block;
    float: left;
    width: 23.733vw;
    height 23.733vw
    padding 2.667vw
}
.oitem_new .zppic img {
    width 100%
}
.oitem_new .zpdes {
    width: 58.667vw;
    font-size: 3.2vw;
    color: #333;
    float: left;
    display: inline;
}
.oitem_new .zpdes .zpt {
    margin-top: 1.6vw;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height 5.333vw
}
.oitem_new .size_gg {
    color: #999;
    font-size: 3.2vw;
}
.oitem_new .serverTxt {
    color: #ff6f3b;
    font-size: 3.2vw;
    margin-top: 2.4vw;
}
.oitem_new .zpprice {
    margin-top: 1.6vw;
    text-align: right;
    float: right;
    display: inline;
    margin-right 3.2vw
}
.oitem_new .sale_price {
    font-size: 3.2vw;
    color: #333;
}
.oitem_new .zpnum {
    font-size: 2.667vw;
    color: #999;
    margin-top: 5.333vw;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}
.total_all{
    color: #333;
    font-size: 3.2vw;
    line-height: 10.133vw;
    text-align: right;
    border-bottom: 0.267vw solid #e4e4e4;
    padding-right: 3.2vw;
}
.total_all .num{
    margin-right: 3.2vw;
}
.total_all .total_price {
    font-size: 3.733vw;
}
.oitem_new_botm {
    text-align right 
    height 13.867vw
}
.oitem_new_botm button{
    height 8vw
    margin-top 2.667vw
    margin-right 2.667vw
    width 20vw
}
.change,.cancel{
    font-size 3.467vw
    border 0.533vw solid #e4e4e4
    border-radius 5.867vw
    background #ffffff
}
.pay{
    font-size 2.4vw
    background #ea4241
    border 0.533vw solid #ea4241
    color #fff
    border-radius 5.867vw
}
</style>